<template>
  <div id="edit-user">
    <el-form :inline="true" :model="editData" ref="editData" :rules="validatorRules">
      <el-form-item label="部门名称" prop="name">
          <el-input v-model="editData.name" maxlength="20" placeholder="请输入部门名称" ></el-input>      
      </el-form-item>
      <el-form-item label="上级部门" prop="parentName">
          <el-input v-model="editData.parentName"  readonly placeholder="请选择上级部门" >
               <span slot="append" class="iconfont icon-caidan" @click="onShowTree('dept')"></span>
          </el-input>
      </el-form-item>
      <el-form-item label="所属区域" prop="areaName">
          <el-input v-model="editData.areaName"  readonly placeholder="请选择区域" >
               <span slot="append" class="iconfont icon-caidan" @click="onShowTree('district')"></span>
          </el-input>
      </el-form-item>
      <el-form-item label="排序"  prop="sort">
        <el-input v-model="editData.sort" maxlength="3"></el-input>
      </el-form-item>
    </el-form>
    <div class="button-bar">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="submit">保 存</el-button>
      <el-button type="primary" @click="resetForm">清 空</el-button>
    </div>
    <!-- 部门-区域树选择面板 -->
    <el-dialog class="tree-dialog" width="30%" :title="tree.treeTitle" :visible.sync="tree.showTreeDialog" append-to-body>
        <el-tree  
          ref="eltree" 
          :data="tree.treeData" 
          show-checkbox  
          node-key="id"
          check-strictly 
          @check="onNodeCheked" 
        ></el-tree>
        <div class="button-bar">
            <el-button @click="onCancelTree">取 消</el-button>
            <el-button type="primary" @click="onConfirmTree">确 定</el-button>
        </div>
    </el-dialog>
  </div>
</template>
<script>
  import treeMixin from "@/components/tree/tree.mixin.js"
  export default {
    mixins:[treeMixin],
    props:{
      initData:{
        type:Object,
        default:()=>{},
        required:false,
      },
    },
    data(){
      return{
        editData:{
          id:'',
          name:"",
          parentName:'',
          parentId:'',
          areaName:'',
          areaId:"",
        },
        validatorRules:{
          name:[
            {required: true, message: '请输入', trigger: 'change'},
          ],
          parentName:[
            {required: true, message: '请输入', trigger: 'change'},
          ],
        }
      }
    },
    watch:{
      initData(newVal){
        if(newVal && newVal.id){
          this.editData=newVal
        }else{
          for(var key in this.editData){
            this.editData[key]=""
          }
        }
      },
      'tree.deptNodeChecked'(newVal){
          this.editData.parentName=newVal.label
          this.editData.parentId=newVal.id
      },
      'tree.districtNodeChecked'(newVal){
          this.editData.areaName=newVal.label
          this.editData.areaId=newVal.id
      },
    },
    methods:{
      submit(){
        var isValidate=false
        this.$refs.editData.validate((bool)=>{
            if(bool){
              isValidate=true
            }
        })
        if(!isValidate){return}
        
        if(this.initData && this.editData.parentId==this.initData.id){
            this.$message.warning("上级部门不能选择当前部门!")
            return
        }
        let submitData=this.editData;
        submitData.moduleName="部门管理"
        this.$http.editDept(submitData)
          .then((res)=>{
            this.$message.success("操作成功！")
              this.resetForm()
              this.$emit("refresh")
              this.$emit('closeDialog',false)
          }).catch((err)=>{
              if(err.data && err.data.message){
            
              }else{
                  window.message.close()
                  window.message= this.$message({
                      type:'error',
                      message:'程序出错,查询失败!',
                      showClose:true,
                  })
              }
              throw(err)
        })
        
      },

      resetForm(){
        this.$refs.editData.resetFields()
        for(var key in this.editData){
            this.editData[key]=""
        }
        this.$set(this.tree.deptNodeChecked,'label',"")
        this.$set(this.tree.districtNodeChecked,'label',"")
        this.$set(this.tree.deptNodeChecked,'id',"")
        this.$set(this.tree.districtNodeChecked,'id',"")

      },

      cancel(){
        this.resetForm()
        this.$emit("refresh")
        this.$emit('closeDialog',false)
      },

      



    }
  }
</script>
<style scoped lang='scss'>
  .button-bar{
    text-align: center;
    margin-top: 20px;
    .el-button{
      margin:0px 10px;
    }
  }
</style>
<style scoped lang="scss">
  //element样式微调
  /deep/ .el-form.el-form--inline{
    display: flex;
    flex-wrap: wrap;
    /deep/ .el-form-item{
      flex-basis: 40%;
      flex-grow: 1;
      margin: 10px;
      .el-input-group__append{
        padding:0px;
        width:38px;
        text-align:center;
        .iconfont{
          display:inline-block;
          width:100%;
          height: 38px;
          line-height: 38px;
        }
      }
    }
  }


</style>



